<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.util.Enumeration,java.util.ArrayList,java.util.HashMap,java.util.HashSet" %>
<%@ page import="cn.edu.nju.ws.aquila.query.Datasource,cn.edu.nju.ws.aquila.user.User" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>datasource</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/main_datasource.css" />
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="script/main_datasource.js"></script>
</head>
<body>
 		<div id="wrapper">
			<div id="top">
				<div id="user" >
					welcome, <span id="userName"><%=session.getAttribute("user")%></span>
				</div>
				<div id="navigation-bar"><a href='main_datasource.jsp' class="nav-title">Datasource</a><a href='main_relation.jsp' class="nav-title">Relation</a><a href='main_query.jsp' class="nav-title">Query</a><a href='logout' class="nav-title">Logout</a></div>
				<div class="mspacing"></div>
				<div id="mbutton-bar">
					<div class="float-button"><a href="#" id="op_importDatasource">Import an new datasource</a></div>
					<div class="float-button"><a href="identify_datasource.jsp">Identify an new datasource</a></div>
					<br class="clear" />
				</div>
			</div>
			<div id="main">
				<div id="left">
					<h3>My datasources</h3>
					<ul>
					 <%
					    HashMap<Integer,ArrayList<String>> ds2tags =new HashMap<Integer,ArrayList<String>>(); 
					    String user = (String)session.getAttribute("user");
					    ArrayList<Integer> constructedDatasets =  Datasource.getDsIdByAuthor(user);
					    for(int dsId:constructedDatasets){
					    	ArrayList<String> tags = Datasource.getDsTags(dsId,user);
					    	ds2tags.put(dsId,tags) ;
					  %>
					 <li><p><a href="#" class="datasourceLink" datatypeid="<%=dsId%>"><%=tags.get(0)%></a></p><div class="tag-helper"><img src="icons/edit_view.png" alt="edit tags" width="10" height="10"/></div></li>
					 <% 
					    }
					 %>
					</ul>
					<h3>Imported datasources</h3>
					<ul id="importeddsList">
					  <%
					    ArrayList<Integer> importedDatasets =  Datasource.getImportedDsIdByUser(user);
					    for(int dsId:importedDatasets){
					    	ArrayList<String> tags = Datasource.getDsTags(dsId,user);
					    	ds2tags.put(dsId,tags) ;
					  %>
					 <li><p><a href="#" class="datasourceLink" datatypeId="<%=dsId%>"><%=tags.get(0)%></a></p><div class="tag-helper"><img src="icons/edit_view.png" alt="edit tags" width="10" height="10"/></div></li>
					 <% 
					    }
					 %>	
					</ul>
				</div>
				<div id="right"></div>
				<br class="clear"/>
			</div>
		</div>
		<div class="hidden">
		  <div id="alldstags">
		   <%
		   for(int id:ds2tags.keySet()){
		   %>
		       <select datatypeid="<%=id%>">
		    <%
		    	ArrayList<String> tags = ds2tags.get(id) ; 
		        for(String tag:tags){
		    %>
				 <option value="<%=tag%>"><%=tag%></option>
		    <% 
		        }
		    %>
		        </select>  
		   <% }%>   
		  </div>
			<div id="tag-display" title="Edit tag">
				<p class="p_select">Select a tag to show</p>
				<hr color="#E3EEF8"/>
				<div align="right"><input type="button" name="select_button" value="ok" /></div>
				<p>or Add a new tag to show</p>
				<input type="text" maxlength=20 name="new-tag"/>
				<hr color="#E3EEF8"/>
				<div align="right"><input type="button" name="input_button" value="ok" /></div>
		</div>
	  <div id="dialog-form" title="Add a new tag" style="padding:20px">
		  <label for="tagName">Name</label>
		  <input type="text" name="tagName" id="tagName" />
      </div>
		</div>
	<div id="import-datasource" title="Import a new datasource">
		<div class="searchBar">
			<input type="text" id="datasource_searchBar" /> <input type="button"
				name="search" value="search" id="searchButton" />
		</div>
		<div class="searchResult">
			<ul id="dsSearchResult">
			</ul>
		</div>
	</div>
	<div id="footer"></div>
</body>
</html>